<template>
	<view v-if="vuex_isMobile" class="bg-m">
		<view class="index-content-m">
			<view class="index-right-title">
				您现在的位置：{{activeTopOneMenuName}} > {{activeTopTwoMenuName}}
			</view>
			<top-menu :secondMenu="secondMenu" :activename="activename" :activeTopOneMenuName="activeTopOneMenuName"
				@activeChange="activeChange" />
			<view class="index-right">

				<content-text v-if="activeType == 'cms_content_text'" ref="contentRef" />
				<content-images v-if="activeType == 'cms_content_image'" ref="contentRef" />
				<content-dept v-if="activeType == 'cms_content_dept'" ref="contentRef" />
				<content-expert v-if="activeType == 'cms_content_expert'" ref="contentRef" />
				<content-news v-if="activeType == 'cms_content_news'" ref="contentRef" />
			</view>

		</view>
		<foot-bar></foot-bar>
	</view>
	<view v-else class="bg">
		<view class="index-content">
			<left-menu :secondMenu="secondMenu" :activename="activename" :activeTopOneMenuName="activeTopOneMenuName"
				@activeChange="activeChange" />
			<view class="index-right">
				<view class="index-right-title">
					您现在的位置：{{activeTopOneMenuName}} > {{activeTopTwoMenuName}}
				</view>
				<content-text v-if="activeType == 'cms_content_text'" ref="contentRef" />
				<content-images v-if="activeType == 'cms_content_image'" ref="contentRef" />
				<content-dept v-if="activeType == 'cms_content_dept'" ref="contentRef" />
				<content-expert v-if="activeType == 'cms_content_expert'" ref="contentRef" />
				<content-news v-if="activeType == 'cms_content_news'" ref="contentRef" />
			</view>

		</view>
		<foot-bar></foot-bar>
	</view>

</template>

<script>
	/**
	 * 程序启动页
	 * */
	import footBar from "@/pages/bottom/foot-bar.vue"
	import rightBtn from "@/pages/right/right-btn.vue"
	import leftMenu from "@/pages/left/left-menu.vue"
	import topMenu from "@/pages/left/top-menu.vue"
	import contentText from "@/pages/content/content-text.vue"
	import contentImages from "@/pages/content/content-images.vue"
	import contentDept from "@/pages/content/content-dept.vue"
	import contentExpert from "@/pages/content/content-expert.vue"
	import contentNews from "@/pages/content/content-news.vue"
	import {
		getMenu
	} from "@/common/api.js";
	export default {
		components: {
			footBar,
			rightBtn,
			leftMenu,
			topMenu,
			contentText,
			contentImages,
			contentDept,
			contentNews,
			contentExpert,
		},
		data() {
			return {
				secondMenu: [],
				activename: '',
				activeType: '',
				activeTopOneMenuName: '',
				activeTopTwoMenuName: '',
				active: ''
			}
		},
		onLoad(option) {
			this.active = option.active
			let tabs = []
			const timer = setInterval(() => {
				tabs = uni.getStorageSync('tabs')
				if (tabs.length > 0) {
					for (var i in tabs) {
						if (this.active == tabs[i]['id']) {
							this.activeTopOneMenuName = tabs[i]['name']
							uni.setStorageSync('activeTopOneMenuName', tabs[i]['name'])
						}
					}
					uni.$emit('activeTo', this.active)
					getMenu({
						parentId: this.active
					}).then(response => {
						if (option.activeMenuType) {
							this.secondMenu = response.data
							this.activename = option.activeMenuName
							this.activeType = option.activeMenuType
							uni.setStorageSync('activeTopTwoMenuName', this.activeTopTwoMenuName)
							uni.setStorageSync('activeMenuName', this.activename)
							uni.setStorageSync('activeMenuType', this.activeType)
						} else {
							this.secondMenu = response.data
							this.activename = response.data[0].id
							this.activeType = response.data[0].tableName
							this.activeTopTwoMenuName = response.data[0].name
							uni.setStorageSync('activeTopTwoMenuName', this.activeTopTwoMenuName)
							uni.setStorageSync('activeMenuName', this.activename)
							uni.setStorageSync('activeMenuType', this.activeType)
						}

						this.$nextTick(() => {
							this.$refs.contentRef.getInfo(this.activename)
						})
					})
					clearInterval(timer)
				}
			}, 100)


			this.activeTopOneMenuName = uni.getStorageSync('activeTopOneMenuName')
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.on('pageData', data => {
				this.secondMenu = data.data
				this.activename = data.data[0].id
				this.activeType = data.data[0].tableName
				this.activeTopTwoMenuName = data.data[0].name
				uni.setStorageSync('activeTopTwoMenuName', this.activeTopTwoMenuName)
				uni.setStorageSync('activeMenuName', this.activename)
				uni.setStorageSync('activeMenuType', this.activeType)
				this.$nextTick(() => {
					this.$refs.contentRef.getInfo(this.activename)
				})
				// data即传过来的参数
			})
			// if (!this.activename) {
			// 	this.secondMenu = uni.getStorageSync('activeMenu')
			// 	this.activename = uni.getStorageSync('activeMenuName')
			// 	this.activeType = uni.getStorageSync('activeMenuType')
			// 	this.activeTopTwoMenuName = uni.getStorageSync('activeTopTwoMenuName')
			// 	this.$nextTick(() => {
			// 		this.$refs.contentRef.getInfo(this.activename)
			// 	})
			// }
		},
		onPageScroll(res) {
			uni.$emit('onPageScroll', res.scrollTop);
		},
		onShow(params) {
			console.log(params)
		},
		methods: {
			activeChange(e) {
				this.activename = e.id
				this.activeType = e.tableName
				this.activeTopTwoMenuName = e.name
				uni.setStorageSync('activeTopTwoMenuName', this.activeTopTwoMenuName)
				uni.setStorageSync('activeMenuName', this.activename)
				uni.setStorageSync('activeMenuType', this.activeType)
				this.$nextTick(() => {
					this.$refs.contentRef.getInfo(e.id)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg-m {
		width: 100%;
		height: auto;
		background-color: #FFFFFF;
		padding: 20px 0;
	}

	.index-content-m {
		width: 100%;
		background-color: #FFFFFF;

		.index-right-title {
			background-color: #193F93;
			font-weight: 400;
			font-size: 43px;
			color: #FFFFFF;
			line-height: 150px;
			padding-left: 72px;
			cursor: pointer;
		}

		.index-right {
			padding-bottom: 40px;
			background-color: #FFFFFF;
			min-height: 700px;


		}
	}

	.bg {
		width: 100%;
		height: auto;
		background: url(@/static/logo/bg.png);
		background-size: cover;
		background-repeat: no-repeat;
		padding: 20px 0;
	}

	.index-content {
		width: 1200px;
		margin: auto;
		background-color: #FFFFFF;
		display: flex;

		.index-right {
			flex: 1;
			margin-top: 5px;
			margin-right: 20px;
			padding-bottom: 20px;
			background-color: #FFFFFF;
			min-height: 700px;

			.index-right-title {
				font-weight: 400;
				font-size: 12px;
				color: #686868;
				line-height: 16px;
				padding-top: 15px;
				cursor: pointer;
			}
		}
	}
</style>